<template>
    <div class="CanvasWrap">
        <!-- 编辑区域 -->
        <CreateElementSection v-if='isOperating' class="CreateElementSection" />
        <!-- 操作元素 -->
        <div class="operates">
            <Operate />
        </div>
        <!-- 通过v-for循环渲染：可编辑元素 -->
        <div class="CanvasView" :style="`{width:${viewWidth}%;height:${viewHeight}%}`">
            <EditableElement v-for="element in elements" :info="element" />
        </div>
    </div>
</template>
<script setup>
import Operate from '@/views/PPTContent/Operate/index.vue'
import CreateElementSection from './CreateElementSection.vue';
import EditableElement from './EditableElement.vue';
import { ref } from 'vue';
import { storeToRefs } from 'pinia'

import { UseMainStore } from '@/stores/index';
let MainStore = UseMainStore();
let { isOperating, elements } = storeToRefs(MainStore);
// CanvasView尺寸
let viewWidth = ref(80);
let viewHeight = ref(80);

</script>
<style lang="scss" scoped>
.CanvasWrap {
    position: relative;
    height: 500px;
    // border: 1px solid rgb(8, 25, 4);
    display: flex;
    justify-content: center;
    align-items: center;

    .CreateElementSection {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
        background-color: rgb(245 245 220 / 24%);
    }

    .operates {
        //  position: absolute;
    }

    .CanvasView {
        width: 80%;
        height: 80%;
        border: 1px solid;
        //  position: absolute;
    }
}
</style>